<!DOCTYPE html>

<html>

<head>
  <title>
    FRUITS
  </title>
</head>

<body>
  <div class="head"><h1>Fruit Sales</h1></div>
  <div id="fruits-list">
    <div class="item" id='apple'>
      <p class="title">Apple</p>
      <p class="price">1$</p>
      <p class="link"><a href="?query=apple">link</a></p>
      <img src="/static/apple.png" />
      <span class="tag">
        <p>red</p>
        <p>sweet</p>
      </span>
      <ul class="salePoint">
        <div class="point">
          <p class="city">LA</p>
          <p class="distance">500</p>
        </div>
        <div class="point">
          <p class="city">Boston</p>
          <p class="distance">200</p>
        </div>
      </ul>
    </div>
    <div class="item">
      <p class="title">Orange</p>
      <p class="price">2$</p>
      <p class="link"><a href="?query=orange">link</a></p>
      <img src="/static/orange.png" />
      <span class="tag">
        <p>sour</p>
        <p>healthy</p>
      </span>
      <ul class="salePoint">
        <div class="point">
          <p class="city">Miami</p>
          <p class="distance">400</p>
        </div>
        <div class="point">
          <p class="city">Washington</p>
          <p class="distance">200</p>
        </div>
      </ul>
    </div>
    <div class="item">
      <p class="title">Pear</p>
      <p class="price">3$</p>
      <p class="link"><a href="?query=pear">link</a></p>
      <img src="/static/pear.png" />
      <span class="tag">
        <p>cheap</p>
        <p>good</p>
      </span>
      <ul class="salePoint">
        <div class="point">
          <p class="city">Huston</p>
          <p class="distance">300</p>
        </div>
        <div class="point">
          <p class="city">Yosemite</p>
          <p class="distance">100</p>
        </div>
      </ul>
    </div>
  </div>

</body>

</html>
